<template>
    <div class="content-nav clearfix">
        <Tabs type="card">
            <TabPane label="商品详情">
                <commodity-contents :contents="userlist.contents"></commodity-contents>
            </TabPane>
            <TabPane label="相关日记(28)">
                <commodity-dariy :navList="navList" :width1="width1"></commodity-dariy>
            </TabPane>
            <TabPane label="累积成交记录（28）">
                <transaction-record :navList="navList" :width="width"></transaction-record>
            </TabPane>
            <TabPane label="评论/回复（28）">
                <commodity-reviews  :width1="width1" :evaluate="userlist.evaluate" :sauts="sauts"></commodity-reviews>
            </TabPane>
            <TabPane label="资讯相册">
                <commodity-album :navList="navList" :width1="width1"></commodity-album>
            </TabPane>
            <TabPane label="购物须知">
                <Commodity-Shopping :notice="userlist.notice"></Commodity-Shopping>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    import CommodityContents from '../../../components/Commodity/CommodityDe/CommodityContents'
    import TransactionRecord from '../../../components/Commodity/CommodityDe/TransactionRecord'
    import CommodityReviews from '../../../components/Commodity/CommodityDe/CommodityReviews'
    import CommodityDariy from '../../../components/Commodity/CommodityDe/CommodityDariy'
    import CommodityAlbum from '../../../components/Commodity/CommodityDe/CommodityAlbum'
    import CommodityShopping from '../../../components/Commodity/CommodityDe/CommodityShopping'
    export default {
        name: "ContentNav",
        props:['navList','width','width1','userlist','sauts'],
        components:{
            CommodityContents,
            TransactionRecord,
            CommodityReviews,
            CommodityDariy,
            CommodityAlbum,
            CommodityShopping
        }
    }
</script>

<style  lang="less">
@import "../../../style/style";
    .content-nav > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background-color: #fafafa;
        width: 142px;
        height: 51px;
        text-align: center;
        margin-right: 0;
        padding: 16px 16px 4px;
    }
    .ivu-tabs-bar{
        height: 51px;
        background-color:  #f5f5f5;
        margin-bottom: 0;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-nav-container{
        height: 50px !important;
    }
    .content-nav > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        border-top: 2px solid  @theme-color-dark !important;
        background-color: #ffffff;
        border-left: 1px solid #e0e0e0 !important;
        border-right: 1px solid #e0e0e0 !important;
        border-bottom: none;
        height: 51px;
    }
    .left-navlist > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background:  @theme-color-dark;
        position: absolute;
        top: 0;
        left: 0;
    }
   .left-navlist .ivu-tabs .ivu-tabs-tabpane{
        height: 100%;
     }

</style>